<template>
    <div>
        <div class="fc-header">
            <div class="fc-wuserheader positionR">
                <img v-if="headerMsg.belongStoreInfo && headerMsg.belongStoreInfo.storeId"
                    @click="$emit('clickHeaderImg',{storeId:headerMsg.belongStoreInfo.storeId,promotionId:headerMsg.promotionId})"
                    class="fc-userheader" :src="headerMsg.belongStoreInfo.logo" alt="">
                <span v-if="headerMsg.belongStoreInfo && headerMsg.belongStoreInfo.storeId" class="fc-userheader-des">
                    <span class="displayBlock one-line-ellepsis">{{headerMsg.belongStoreInfo.name}}</span>
                    <span class="userheader-des">
                        {{headerMsg.belongStoreInfo.industry}}
                        <!-- <span v-if="headerMsg.belongStoreInfo && headerMsg.belongStoreInfo.evaluateLevel">
                            <img class="star-light" src="../../../assets/images/store/star_light.png" alt="">
                            {{headerMsg.belongStoreInfo.evaluateLevel}}
                        </span> -->
                        <!-- <span v-if="discountList && headerMsg.swiperLength >= headerMsg.belongSwiperIndex">{{getDiscount(headerMsg.belongStoreInfo.storeId)}}</span> -->
                    </span>
                </span>
                <div class="fc-attention" v-if="headerMsg.belongStoreInfo && !headerMsg.belongStoreInfo.concerned"
                    @click="handleShowCode">
                    +关注
                </div>
                <div class="fc-attention cancle-attention"
                    v-else-if="headerMsg.belongStoreInfo && headerMsg.belongStoreInfo.concerned && headerMsg.isNeedCancleAtt"
                    @click="cancleAttetion">
                    已关注
                </div>
                <span class="fc-wtop-icon displayFlex flexCenter"
                    v-if="headerMsg.rightType=='stroeApply' || !headerMsg.rightType">
                    <span v-if="headerMsg.belongStoreInfo" class="store-apply-enter" @click="toStoreApply">商家入驻</span>
                </span>
                <!-- v-else-if="headerMsg.rightType=='storeHome'"-->
                <span class="fc-wtop-icon displayFlex flexCenter" v-else-if="headerMsg.rightType=='storeHome'">
                    <router-link v-if="message && message.content" class="chat-message one-line-ellepsis"
                        :to="{path:'/im/chat',query:{storeId:headerMsg.belongStoreInfo.storeId,scene:'team'}}">
                        新消息
                    </router-link>
                    <span v-if="headerMsg.belongStoreInfo" class="store-apply-enter back-to-amusing ttn1"
                        :class="{'personal-icon':ttn == 1}">
                        <router-link v-if="ttn == 1" :to="{path:'/home',query:{page:'card',ttn:'1'}}"
                            class="right-icon-item">
                            <!-- <span class='iconfont icon-gerenzhongxin1 right-server-icon' ></span> -->
                            <img class="personal-center" :src="staticImageUrl('/images/store/geren_icon.png')" alt="">
                            <!-- <img class="right-server-icon" src="../../../assets/images/store/service_icon.png" alt=""> -->
                        </router-link>
                        <!--暂时关掉这个-->
                        <router-link :to="{path:'/home'}" v-if="ttn != 1" class="right-icon-item">
                            <img class="right-back-icon" :src="staticImageUrl('/images/store/close_transp.png')" alt="">
                        </router-link>
                    </span>
                </span>
            </div>
            <close-cancle-btns ref="closeCancleBtns" @sureCancle="sureCancle"></close-cancle-btns>
            <transition name="CodeAlert" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
                <code-alert v-if="showCode == 1" :wxQrcode="this.headerMsg.belongStoreInfo.wxQrcode"
                    @handleHidden="handleHidden">
                </code-alert>
            </transition>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: "storeMsg",
    props: {
        headerProp: Object,
        discountList: Array,
    },
    data () {
        return {
            showCode: '',
            showAlreadyText: false,//已关注的字样的动画
            cancleMsg: {},
            headerMsg: {
                // belongStoreInfo: {
                //     storeId: 0,
                //     logo: '',
                //     promotionId: '',
                //     concerned: '',
                //     name: '',
                //     industry: '',//产品
                //     evaluateLevel: "0",//评级
                // },
                // mediaType:0,//表示视频，1表示轮播图
                // mediaContents:[
                //     {url:''}
                // ],
                // nowSwiperIndex:1,
                //belongSwiperIndex:0,
                //swiperLength:0,
                //rightType:'stroeApply', //storeHome商家官网 , //stroeApply商家入驻
                //isNeedCancleAtt:false,//是否需要取消关注按钮
            },

        }
    },
    computed: {
        ...mapState({
            message: state => state.logic.notReadMsg,
        }),
    },
    async mounted () {
        this.headerMsg = Object.assign({}, this.headerMsg, this.headerProp);
        let storeId = this.headerMsg.belongStoreInfo.storeId;
        this.chatMsg({ storeId })
    },
    methods: {
        ...mapMutations(['chatMsg']),
        // 点击跳转到商家聊天室
        handleGoIM () {
            let params = {
                storeId: this.$route.query.storeId,
                userId: this.userId,
                thirdId: this.thirdId,
                enterType: '1',
                enterTypeKey: '0'
            }
            this.$store.dispatch('getChatGroupIdApi', params).then((data) => {
                if (data.success) {
                    this.$router.push(
                        {
                            path: '/im/chat',
                            query: { scene: 'team', chatGroupId: data.result }
                        }
                    )
                }
            })
        },
        // 点击关注显示商家微信二维码
        handleShowCode () {
            this.showCode = 1
            this.$emit('doAttention', 1, this.headerMsg.belongStoreInfo.storeId, this.headerMsg.belongSwiperIndex, '', false)
        },
        countDistance () {
            this.$emit('countDistance', this.headerMsg.belongStoreInfo)
        },
        handleHidden (obj) {
            // console.log(obj, '子传回来的');
            this.showCode = obj
        },
        showHide () {
            this.showAlreadyText = true;
            setTimeout(() => {
                this.showAlreadyText = false
            }, 300);
        },
        getDiscount (storeId) {
            let that = this;
            for (let value of that.discountList) {
                if (value.storeId == storeId) {
                    return value.discount
                }
            }
        },
        toStoreApply () {
            this.$router.push({ path: '/store/apply', query: { storeId: this.headerMsg.belongStoreInfo.storeId } })
        },
        cancleAttetion () {
            this.$refs.closeCancleBtns.showSlideBottom()
        },
        sureCancle (obj, cb) {
            this.$emit('doAttention', 1, this.headerMsg.belongStoreInfo.storeId, this.headerMsg.belongSwiperIndex, cb, true)
        },
    },
    watch: {
        headerProp (val) {
            this.headerMsg = Object.assign({}, this.headerMsg, val);
        },

    },
    components: {
        'close-cancle-btns': () => import('../../commonActModel/closeCancleBtns/CloseCancleBtns'),
        'code-alert': () => import('../../../pages/store/components/CodeAlert'),
    }
}
</script>

<style scoped lang="scss">
.fc-header {
    color: #000;
    padding: 0.25rem 0.16rem;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fc-header /deep/ {
    .slide-bottom-transition {
        background-color: transparent;
        max-height: 2.16rem;
    }
    .right-slide {
        z-index: 1049;
    }
}
.fc-wuserheader {
    height: 0.32rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: #fff;
}

.fc-userheader {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 0.06rem;
    background: #fff;
    margin-right: 0.08rem;
}

.fc-userheader-des {
    font-size: 0.12rem;
    font-weight: bold;
    color: #fff;
    .displayBlock {
        max-width: 1.5rem;
        width: auto;
    }
}

.userheader-des {
    font-size: 0.12rem;
    display: inline-block;
    background-color: transparent;
    border-radius: 0.25rem;
    text-align: right;
    transform: scale(0.8);
    position: relative;
    left: -0.02rem;
    padding: 0;
}

.fc-attention {
    margin-left: 0.1rem;
    display: inline-block;
    height: 0.28rem;
    background-color: #5d89e8;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.25rem;
    text-align: center;
    line-height: 0.28rem;
    color: #fff;
    font-size: 0.12rem;
    padding: 0 0.08rem;
}

.cancle-attention {
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 0.12rem;
}

.fc-attention-img {
    width: 0.07rem;
    vertical-align: middle;
    padding: 0.02rem 0.02rem;
    position: relative;
    top: -0.01rem;
}

.fc-wtop-icon {
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: 0;
    margin: auto;
    padding-top: 0.02rem;
}

.amusing-top-icon {
    height: 0.21rem;
    width: 0.21rem;
    margin-left: 0.1rem;
}

.fc-swiper-pagination {
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 0.1rem;
    padding: 0.01rem 0.06rem;
    border-radius: 0.25rem;
    margin-left: 0.05rem;
    position: absolute;
    right: 0;
    top: 150%;
}

.amusing-wtop-icon {
    display: inline-block;
}

.store-apply-enter {
    border: 1px solid #fff;
    color: #fff;
    font-size: 0.12rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    display: inline-block;
    text-align: center;
    padding: 0.02rem 0.1rem;
    position: relative;
    top: -0.02rem;
}
.back-to-amusing {
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    padding: 0;
    height: 0.28rem;
    width: 0.88rem;
    text-align: center;
    line-height: 0.28rem;
}
.right-server-icon {
    position: relative;
    width: 0.24rem;
    height: 0.24rem;
    line-height: 0.24rem;
    font-size: 0.18rem;
    color: #fff;
    transform: translateY(-50%);
    top: 50%;
}
.right-back-icon {
    width: 0.2rem;
    position: relative;
    transform: translateY(-50%);
    top: 50%;
}
.right-icon-item {
    height: 0.28rem;
    display: inline-block;
    vertical-align: middle;
}
/*右边的线*/
.back-to-amusing .right-icon-item:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.ttn1 .right-icon-item {
    border: none !important;
}
.ttn1 {
    width: 0.44rem;
}
.star-light {
    height: 0.1rem;
}
::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
.chat-message {
    background-color: #239cf6;
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    position: relative;
    margin-right: 0.05rem;
    max-width: 0.8rem;
    white-space: nowrap;
    z-index: 1;
    padding: 0 0.08rem;
}
// 个人中心图片样式
.personal-center {
    // width: 100%;
    height: 100%;
}
.personal-icon {
    background: none;
}
</style>